<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- Site CSS -->
    <script src="./jquery-2.2.3.min.js"></script>
    <link href="./bootstrap.min.css" rel="stylesheet">
    <script src="./bootstrap.min.js"></script>
</head>

<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="media">
            <div class="media-body">
                <h4 class="media-heading">JavaScript/HTML格式化</h4>
                <div id="desc1">JavaScript/HTML压缩、格式化工具</div>
            </div>
        </div>

    </div>
    <div class="panel-body">
        <!--内容块开始-->
        <div>
			<textarea id="content" name="RawJson" class="json_input" rows="16" style="width: 100%;" spellcheck="false"
                      placeholder="请输入Javascript 或者 HTML 代码">
			<div id="app" class="body-container">
    <div class="spinner">
      <div class="spinner-container container1">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
      </div>
    </div>
  </div>
			</textarea>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button id="sels" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                制表符缩进<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="javascript:;" onclick="sj(1)">1个空格缩进</a></li>
                <li><a href="javascript:;" onclick="sj(2)">2个空格缩进</a></li>
                <li><a href="javascript:;" onclick="sj(4)">4个空格缩进</a></li>
                <li><a href="javascript:;" onclick="sj(8)">8个空格缩进</a></li>
            </ul>
            <button type="button" class="btn btn-primary" onclick="return do_js_beautify();" id="beautify">格式化</button>
            <button type="button" class="btn btn-primary" onclick="pack_js(0);">普通压缩</button>
            <button type="button" class="btn btn-primary" onclick="pack_js(1);">加密压缩</button>
            <button type="button" class="btn btn-primary" onclick="change();">JS/HTML互转</button>

            <button type="button" class="btn btn-primary" onclick="convert();">html转js</button>

            <button type="button" class="btn btn-danger" onclick="Empty();">清空结果</button>
        </div>
        <!--内容块结束-->

        <div style="padding-top: 10px;">
            <textarea id="result" name="RawJson" class="json_input" rows="10" style="width: 100%;" spellcheck="false"
                      placeholder=""></textarea>
        </div>


    </div>
    <input type="hidden" id="tabsize" value="1"/>
    <div class="panel-footer"></div>
</div>
<script type="text/javascript">
    if (window.localStorage && localStorage.getItem("content2format")) {
        document.getElementById('content').value = localStorage.getItem("content2format");
        localStorage.setItem("content2format", "");
    }


    function sj(s) {
        $("#tabsize").val(s);
        $("#sels").text(s + "个空格缩进");
    }

    function do_js_beautify() {
        document.getElementById('beautify').disabled = true;
        js_source = document.getElementById('content').value.replace(/^\s+/, '');
        tabsize = document.getElementById('tabsize').value;
        tabchar = ' ';
        if (tabsize == 1) {
            tabchar = '\t';
        }
        if (js_source && js_source.charAt(0) === '<') {
            document.getElementById('content').value = style_html(js_source, tabsize, tabchar, 80);
        } else {
            document.getElementById('content').value = js_beautify(js_source, tabsize, tabchar);
        }
        document.getElementById('beautify').disabled = false;
        return false;
    }

    function pack_js(base64) {
        var input = document.getElementById('content').value.replace(/^\s+|\s+$/g, "");
        if (input == '') {
            alert('请输入需要压缩的内容!');
            return;
        }

        var packer = new Packer;
        if (base64) {
            var output = packer.pack(input, 1, 0);
        } else {
            var output = packer.pack(input, 0, 0);
        }
        document.getElementById('content').value = output;
    }

    function Empty() {
        document.getElementById('content').value = '';
        document.getElementById('content').select();
    }

    function rechange() {
        document.getElementById('content').value = document.getElementById('content').value.replace(/document.writeln\("/g, "").replace(/"\);/g, "").replace(/\\\"/g, "\"").replace(/\\\'/g, "\'").replace(/\\\//g, "\/").replace(/\\\\/g, "\\")
    }

    function changeIt() {
        document.getElementById('content').value = "document.writeln(\"" + document.getElementById('content').value.replace(/\\/g, "\\\\").replace(/\\/g, "\\/").replace(/\'/g, "\\\'").replace(/\"/g, "\\\"").split('\n').join("\");\ndocument.writeln(\"") + "\");"
    }

    var ischange = false;

    function change() {
        if (!ischange) {
            changeIt();

        } else {
            rechange();
        }
        ischange = !ischange;
    }

    function GetFocus() {
        document.getElementById('content').focus();
    }

    function convert() {
        var txt = "";

        txt = html2js($("#content").val());

        $("#result").val(txt);
    }

    function html2js(text) {
        var split1 = text.split("\n");
        text = "var text = \"\";\n";
        for (var i = 0; i < split1.length; i++) {
            var str = split1[i];
            text += "text += \"" + str.replace(/"/g, "\\\"") + "\";\n";
        }
        return text;
    }
</script>
<!-- content ed -->
<script src="jsformat.js"></script>
<script src="htmlformat.js"></script>
<script src="base.js"></script>
</body>
</html>